<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @refresh-change="refreshChange"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>

<script>
    import {mapGetters} from "vuex";
    import {getList,getDetail,add,update} from "@/youan/api/kettle/dataSourceConfig";
    export default {
        name: "dataSourceConfig",
        data() {
          return {
            loading: true,
            form: {},
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 0
            },
            option:{
              tip: false,
              border: true,
              index: true,
              dialogType: 'drawer',
              dialogClickModal: false,
              labelWidth: 150,
              column: [
                {
                  label: "数据源名称",
                  prop: "dbname",
                  editDisabled: true,
                  display: true,
                  rules: [
                    {
                      required: true,
                      message: "请输入数据源名称",
                      trigger: "blur"
                    }
                  ]
                },
                {
                  label: "ip",
                  prop: "ip",
                  display: true,
                  rules: [
                    {
                      required: true,
                      message: "请输入数据源ip地址",
                      trigger: "blur"
                    }
                  ]
                },
                {
                  label: "端口号",
                  prop: "port",
                  display: true,
                  rules: [
                    {
                      required: true,
                      message: "请输入数据源端口号",
                      trigger: "blur"
                    }
                  ]
                },
                {
                  label: "数据库登录用户名",
                  prop: "username",
                  display: true,
                  rules: [
                    {
                      required: true,
                      message: "请输入数据库登录用户名",
                      trigger: "blur"
                    }
                  ]
                },
                {
                  label: "数据库登录密码",
                  prop: "password",
                  display: true,
                  rules: [
                    {
                      required: true,
                      message: "请输入数据库登录密码",
                      trigger: "blur"
                    }
                  ]
                },
                {
                  label: "数据源类型",
                  prop: "type",
                  display: true,
                  type: "select",
                  dicData: [
                    {
                      label: "MYSQL",
                      value: "MYSQL"
                    },
                    {
                      label: "ORACLE",
                      value: "ORACLE"
                    }
                  ],
                  rules: [
                    {
                      required: true,
                      message: "请选择数据源类型",
                      trigger: "change"
                    }
                  ]
                },
                {
                  label: "备注",
                  prop: "remarks",
                  span: 24,
                  type: "textarea",
                  display: true
                }
              ]
            }
          }
        },
      computed: {
        ...mapGetters(["userInfo", "permission"]),
        permissionList() {
          return {
            addBtn: this.vaildData(this.permission.dataSourceConfig_add, false),
            viewBtn: this.vaildData(this.permission.dataSourceConfig_view, false),
            delBtn: this.vaildData(this.permission.dataSourceConfig_delete, false),
            editBtn: this.vaildData(this.permission.dataSourceConfig_edit, false)
          };
        },
      },
      methods: {
        beforeOpen(done, type) {
          if (["edit", "view"].includes(type)) {
            getDetail(this.form.id).then(res => {
              this.form = res.data.data;
            });
          }
          done();
        },
        rowSave(row, loading, done) {
          add(row).then(() => {
            loading();
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }, error => {
            done();
            console.log(error);
          });
        },
        rowUpdate(row, index, loading, done) {
          update(row).then(() => {
            loading();
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }, error => {
            done();
            console.log(error);
          });
        },
        selectionChange(list) {
          this.selectionList = list;
        },
        currentChange(currentPage) {
          this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
          this.page.pageSize = pageSize;
        },
        refreshChange() {
          this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
          this.loading = true;
          getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.loading = false;
            this.selectionClear();
          });
        },
        selectionClear() {
          this.selectionList = [];
          this.$refs.crud.toggleSelection();
        },
      }
    }
</script>

<style scoped>

</style>
